<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <FilterTable
      ref="table"
      columnsRef="testindex"
      :isExportExcel2="true"
      exportFileName="备件发运单.xlsx"
      :columns="columns"
      :fetchapi="fetchApi"
      :isSelectColumn="false"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
    >
    </FilterTable>
    <BaseDialog title="服务站查询" :visible.sync="isShowSearchCustomer" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SearchCustomer :customerNo="kehuxuanze" @close="isShowSearchCustomer = false" @addCustomerCode="confirmSearchCustomer" />
    </BaseDialog>
    <div>
      <Drawer
        :visible.sync="isShowpartBuyItems"
        title="承运单基础信息"
        :width="920"
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
        <partBuyItems :top="top" @cancel="isShowpartBuyItems = false" />
        <info-model v-model="initData" @close="infoClose" />
      </Drawer>
<!--      <BaseDialog-->
<!--        width="80%"-->
<!--        title="承运单基础信息"-->
<!--        :visible.sync="isShowpartBuyItems"-->
<!--        destroyOnClose-->
<!--        :containerStyle="{ height: 'calc(100% - 60px)',-->
<!--        overflow: 'auto',-->
<!--        paddingBottom: '60px' }">-->
<!--        <partBuyItems :top="top" @cancel="isShowpartBuyItems = false" />-->
<!--      </BaseDialog>-->
    </div>
  </div>
</template>

<script>
  import { dictionary } from '@/utils/dictMixin';
  import { getShipmentData } from '@/api/partsmanage/carrierTrace/query';
  import partBuyItems from './partBuyItems';
  import SearchCustomer from './SearchCustomer';
  export default {
    name: 'carrierTraceindex',
    mixins: [dictionary],
    components: {
      partBuyItems,
      SearchCustomer
    },
    data() {
      return {
        top: {},
        topFilterList: this.createTopFilterList(),
        fetchParams: { xhrAbort: true },
        columns: this.createTableColumns(),
        kehuxuanze: '',
        fetchApi: getShipmentData,
        isShowSearchCustomer: false,
        isShowpartBuyItems: false,
        dealerCode: '',
        initData: {}
      }
    },
    mounted() {
      // 分页
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    methods: {
      createTopFilterList() {
        return [
          {
            type: 'INPUT',
            label: '承运单号:',
            fieldName: 'coNo',
            maxlength: 30,
            change: val => this.handleInputChange(val,'coNo')
          },
          {
            type: 'RANGE_DATE',
            label: '承运单日期',
            initialValue: '',
            fieldName: 'startTime|endTime',
            valueFormat: 'yyyy-MM-dd',
            placeholder: '请选择'
          },
          {
            type: 'SELECT',
            label: '承运单状态',
            fieldName: 'purchaseStatus',
            itemList: this.createDictList('3014',[30141005,30141006])
          },
          {
            type: 'INPUT',
            label: '服务站代码',
            fieldName: 'dealerCode',
            readonly: true,
            unitRender: () => {
              return (
                <el-button
              icon="el-icon-search"
              onClick={() => {
                this.isShowSearchCustomer = true;
              }}
            ></el-button>
            );
            },
            onEnter: val => {
              console.log('对方经销商 onEnter');
              this.isShowSearchCustomer = true;
            }
          },
          {
            type: 'INPUT',
            label: '服务站名称:',
            fieldName: 'dealerName',
            maxlength: 30
          },

          {
            type: 'INPUT',
            label: '承运商名称:',
            fieldName: 'coStoreName',
            maxlength: 30
          },
          {
            type: 'INPUT',
            label: '采购单号:',
            fieldName: 'BSCSDJ',
            maxlength: 20,
            change: val => this.handleInputChange(val,'BSCSDJ')
          },
          {
            type: 'INPUT',
            label: '交货单号:',
            fieldName: 'bsysdh',
            maxlength: 30,
            change: val => this.handleInputChange(val,'bsysdh')
          },
          {
            type: 'RANGE_DATE',
            fieldName: 'auditStartDate|auditEndDate',
            label: '发运日期',
            initialValue: [],
            dateType: 'daterange'
          },

        ]
      },
      createTableColumns() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            fixed: 'left',
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '操作',
            dataIndex: 'column-action',
            render: params => {

              return (
                <div>
                <el-button  type="text" size="mini" onClick={() => this.showItems(params.row)}>
              明细
              </el-button>
              </div>
            );
            }
          },
          {
            title: '服务站代码',
            dataIndex: 'cpanyCode',
            sorter: true,
          },
          {
            title: '服务站名称',
            dataIndex: 'companyName',
            sorter: true,
            width: 200
          },
          {
            title: '承运单号',
            dataIndex: 'coNo',
            sorter: true,
          },
          {
            title: '承运单状态',
            dataIndex: 'CO_STATUS',
            filter: true,
            sorter: true,
            render: props => {
              return <span>{this.createDictText(props.row.CO_STATUS, '3014')}</span>;
            }
          },
          {
            title: '承运单日期',
            dataIndex: 'coCreateDate',
            // dateFormat: 'yyyy-MM-dd HH:mm:ss',
            dateFormat: 'yyyy-MM-dd',
            sorter: true,
          },
          {
            title: '包装种类',
            dataIndex: 'ZPACK',
            sorter: true,
            render: props => {
              return <span>{this.createDictText(props.row.ZPACK, '3035')}</span>;
            }
          },
          {
            title: '交货品种合计',
            dataIndex: 'BSZPZS',
            sorter: true,
          },
          {
            title: '交货数量合计',
            dataIndex: 'BSZSLS',
            sorter: true,
          },
          {
            title: '交货金额合计',
            dataIndex: 'BSAMOUNT',
            sorter: true,
          },
          {
            title: '发运方式',
            dataIndex: 'BTYSLX',
            sorter: true,
            render: props => {
              return <span>{this.createDictText(props.row.BTYSLX, '3024')}</span>;
            }
          },
          {
            title: '发运日期',
            dataIndex: 'BSFYRQ',
            dateFormat: 'yyyy-MM-dd',
            sorter: true,
          },
          {
            title: '承运商名称',
            dataIndex: 'coStoreName',
            sorter: true,
          },
          {
            title: '服务站到货确认时间',
            dataIndex: 'BSQRSJ',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '服务站验收确认时间',
            dataIndex: 'BSSCRQ',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '时效天数',
            dataIndex: 'traceNO',
            sorter: true,
            width: 180,
            render: props => {
            return  this.computeDay(props);
            }
          },
          {
            title: '要求到货时间',
            dataIndex: 'BSYJDD',
            sorter: true,
            width: 180,
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
          },
          {
            title: '是否超期',
            dataIndex: 'bsysdh',
            sorter: true,
            width: 180,
            render: props => {
              if(props.row.BSQRSJ&&props.row.BSYJDD){
                if(props.row.BSQRSJ>props.row.BSYJDD){
                  return '是';
                }else{
                  return '否';
                }
              }else{
                return '—'
              }

            }
          },
          {
            title: '备注',
            dataIndex: 'remark',
            sorter: true,
            width: 180
          },
          {
            type: 'INPUT',
            label: '运费',
            fieldName: 'ZCURR01',
            initialValue: '',
            disabled: true,
            hidden:true
          },
          {
            type: 'INPUT',
            label: '提货地址',
            fieldName: 'thdz',
            initialValue: '',
            disabled: true,
            hidden:true
          },
          {
            type: 'INPUT',
            label: '包装件数',
            fieldName: 'menge',
            initialValue: '',
            disabled: true,
            hidden:true
          },
          {
            type: 'INPUT',
            label: '电话',
            fieldName: 'telph',
            initialValue: '',
            disabled: true,
            hidden:true
          },
          {
            type: 'INPUT',
            label: '快递单号',
            fieldName: 'TDLNR',
            initialValue: '',
            disabled: true,
            hidden:true
          },
        ]
      },
      changeHandle(val) {
        val.endTime && (val.endTime = val.endTime.split(' ')[0] + ' 23:59:59');
        this.fetchParams = Object.assign({},val);
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      computeDay(val){
        if(val.row.BSFYRQ&&val.row.BSYJDD){
          var  startDate = Date.parse(val.row.BSFYRQ);
          var  endDate = Date.parse(val.row.BSYJDD);
          if (startDate>endDate){
            var diffDate = Math.abs(startDate - endDate) // 取相差毫秒数的绝对值
            var totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) //
            return  totalDays;
          }
          if (startDate==endDate){
            return 0;
          }
          var diffDate = Math.abs(endDate - startDate) // 取相差毫秒数的绝对值
          var totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) //
          return  totalDays;
        }else{
          return 0;
        }
      },
      async confirmSearchCustomer(row) {
        this.rowData = row[0];
        this.topFilterList.find(x => x.fieldName == 'dealerCode').initialValue = row[0].dealerCode;
        this.topFilterList.find(x => x.fieldName == 'dealerName').initialValue = row[0].dealerName;
      },

      async handleInputChange(val,key){
        if (key === 'bsysdh'){
          var li= /[\u4e00-\u9fa5]/.test(val);
          if(li===true){
            this.topFilterList.find(x => x.fieldName === 'bsysdh').initialValue = '';
            return this.$message.warning('交货单号不要输入包含中文字符');
          }
        }
        if (key === 'BSCSDJ'){
          var li= /[\u4e00-\u9fa5]/.test(val);
          if(li===true){
            this.topFilterList.find(x => x.fieldName === 'BSCSDJ').initialValue = '';
            return this.$message.warning('采购单号不要输入包含中文字符');
          }
        }
        if (key === 'coNo'){
          var li= /[\u4e00-\u9fa5]/.test(val);
          if(li===true){
            this.topFilterList.find(x => x.fieldName === 'coNo').initialValue = '';
            return this.$message.warning('承运单号不要输入包含中文字符');
          }
        }
      },
      selectData(val) {
        this.tableData = val;
      },
      infoClose(rData) {
        this.isShowpartBuyItems = false;
        if (rData.type === 'refresh') {
          // 重新加载
          this.fetchParams = { ...this.fetchParams };
        }
      },
      showItems(e) {
        this.isShowpartBuyItems = true;
        this.top = e;
      },
    }
  }
</script>
